<template>
    <div class="order-card">
        <img :src="order.orderPicture" alt="商品图片" class="product-image" />
        <div class="order-details">
            <h3 class="product-name">{{ order.prodName }}</h3>
            <p class="buyer-name">购买人: {{ order.cusName }}</p>
            <p class="order-amount">订单金额: ¥{{ order.orderPrice }}</p>
            <p class="order-status">配送状态: {{ statusText }}</p>
        </div>
        <a-button type="primary" @click="manageOrder">管理</a-button>
    </div>
</template>

<script>
import { onBeforeMount, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import defaultPicture from '../../../assets/default.jpg';

export default {
    name: 'OrderCard',
    props: {
        order: {
            type: Object,
            required: true,
        },
    },
    setup(props) {

        const statusText = ref('');

        const router = useRouter();

        onBeforeMount(() => {
            if (props.order.orderPicture === null) {
                props.order.orderPicture = defaultPicture;
            }
        });

        onMounted(() => {
            initStatusText();
        });

        const initStatusText = () => {
            if (props.order.orderStatus === 0) {
                statusText.value = '待发货';
            } else if (props.order.orderStatus === 1) {
                statusText.value = '正在运输';
            } else if (props.order.orderStatus === 2) {
                statusText.value = '已送达';
            } else if (props.order.orderStatus === 3) {
                statusText.value = '已签收';
            } else if (props.order.orderStatus === 4) {
                statusText.value = '申请取消';
            } else {
                statusText.value = '未知状态';
            }
        };

        const manageOrder = () => {
            // 处理管理订单的逻辑
            console.log(`管理订单: ${props.order.id}`);
            router.push({
                name: 'BusOrderManager',
                query: { 
                    orderId: props.order.id,
                },
            });
        }
        
        return {
            statusText,
            manageOrder,
        };
    }
    // data() {
    //     return {
    //         statusText: ''
    //     };
    // },
    // created() {
    //     this.fetchData();
    // },
    // methods: {
    //     fetchData() {
    //         if (this.order.status === 0) {
    //             this.statusText = '待发货';
    //         } else if (this.order.status === 1) {
    //             this.statusText = '运输中';
    //         } else if (this.order.status === 2) {
    //             this.statusText = '已完成';
    //         } else if (this.order.status === 3) {
    //             this.statusText = '申请取消';
    //         } else {
    //             this.statusText = '未知状态';
    //         }
    //     },
    //     manageOrder(id) {
    //         // 处理管理订单的逻辑
    //         console.log(`管理订单: ${id}`);
    //         this.$router.push({
    //             path: '/business/order/manage',
    //             query: { orderId: id },
    //         });
    //     },
    // },
};
</script>

<style scoped>
.order-card {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
}

.product-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-right: 16px;
}

.order-details {
    flex-grow: 1;
}

.order-name {
    font-size: 16px;
    font-weight: bold;
}

.order-status {
    color: #999;
}
</style>